<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<table class="easyui-datagrid" id="itemList" title="商品列表"
       data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">
    <thead>
    <tr>
        <th data-options="field:'ck',checkbox:true"></th>
        <th data-options="field:'id',width:60">商品ID</th>
        <th data-options="field:'title',width:200">商品标题</th>
        <th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">叶子类目</th>
        <th data-options="field:'sellPoint',width:100">卖点</th>
        <th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>
        <th data-options="field:'num',width:70,align:'right'">库存数量</th>
        <th data-options="field:'barcode',width:100">条形码</th>
        <th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">状态</th>
        <th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">创建日期</th>
        <th data-options="field:'updated',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">更新日期</th>
    </tr>
    </thead>
</table>
<div id="itemEditWindow" class="easyui-window" title="编辑商品"
     data-options="modal:true,closed:true,iconCls:'icon-save',href:'/page/item-edit'"
     style="width:80%;height:80%;padding:10px;">
</div>
<script>

    function getSelectionsIds() {
        var itemList = $("#itemList");
        /*[item,item,item,item],通过函数,获取当前表格中选中的用户记录*/
        var sels = itemList.datagrid("getSelections");
        var ids = [];
        for (var i in sels) {
            ids.push(sels[i].id);
        }
        //将数组拼接成串 1,2,3,4,5
        ids = ids.join(",");
        return ids;
    }

    var toolbar = [{
        text: '新增',
        iconCls: 'icon-add',
        handler: function () {
            $(".tree-title:contains('新增商品')").parent().click();
        }
    }, {
        text: '编辑',
        iconCls: 'icon-edit',
        handler: function () {
            //获取用户选中的数据
            var ids = getSelectionsIds();
            if (ids.length == 0) {
                $.messager.alert('提示', '必须选择一个商品才能编辑!');
                return;
            }
            if (ids.indexOf(',') > 0) {
                $.messager.alert('提示', '只能选择一个商品!');
                return;
            }

            $("#itemEditWindow").window({
                onLoad: function () {
                    //回显数据
                    var data = $("#itemList").datagrid("getSelections")[0];
                    //将价格转为小数
                    data.priceView = KindEditorUtil.formatPrice(data.price);
                    //该函数主要作用是将表格数据回显到form表单中
                    $("#itemeEditForm").form("load", data);

                    // 加载商品描述
                    //_data = SysResult.ok(itemDesc)
                    $.getJSON('/item/query/item/desc/' + data.id, function (_data) {
                        if (_data.status == 200) {
                            //UM.getEditor('itemeEditDescEditor').setContent(_data.data.itemDesc, false);
                            itemEditEditor.html(_data.data.itemDesc);
                        }
                    });

                    //加载商品规格
                    $.getJSON('/item/param/item/query/' + data.id, function (_data) {
                        if (_data && _data.status == 200 && _data.data && _data.data.paramData) {
                            $("#itemeEditForm .params").show();
                            $("#itemeEditForm [name=itemParams]").val(_data.data.paramData);
                            $("#itemeEditForm [name=itemParamId]").val(_data.data.id);

                            //回显商品规格
                            var paramData = JSON.parse(_data.data.paramData);

                            var html = "<ul>";
                            for (var i in paramData) {
                                var pd = paramData[i];
                                html += "<li><table>";
                                html += "<tr><td colspan=\"2\" class=\"group\">" + pd.group + "</td></tr>";

                                for (var j in pd.params) {
                                    var ps = pd.params[j];
                                    html += "<tr><td class=\"param\"><span>" + ps.k + "</span>: </td><td><input autocomplete=\"off\" type=\"text\" value='" + ps.v + "'/></td></tr>";
                                }

                                html += "</li></table>";
                            }
                            html += "</ul>";
                            $("#itemeEditForm .params td").eq(1).html(html);
                        }
                    });
                    //目的:实现商品类目的回显
                    //1.通过data数据,返回商品分类id
                    var cid = data.cid;
                    //alert("我是商品分类目录id=" + cid);
                    //2.发起ajax请求,注意请求参数问题,必须和方法接受一致
                    $.get("/item/cat/queryItemName", {itemCatId: cid}, function (data) {
                        //alert("动态获取数据:" + data);
                        //3.将数据回显到指定位置
                        //按照标签找兄弟
                        //$("#itemeEditForm input[name='cid']").siblings("span").text(data);
                        //找cid的前一个兄弟
                        $("#itemeEditForm input[name='cid']").prev().text(data);
                    })
                    KindEditorUtil.init({
                        "pics": data.image,
                        "cid": data.cid,
                        fun: function (node) {
                            KindEditorUtil.changeItemParam(node, "itemeEditForm");
                        }
                    });
                }
            }).window("open");
        }
    }, {
        text: '删除',
        iconCls: 'icon-cancel',
        handler: function () {
            var ids = getSelectionsIds();
            if (ids.length == 0) {
                $.messager.alert('提示', '未选中商品!');
                return;
            }
            $.messager.confirm('确认', '确定删除ID为 ' + ids + ' 的商品吗？', function (r) {
                if (r) {
                    var params = {"ids": ids};
                    $.post("/item/delete", params, function (data) {
                        if (data.status == 200) {
                            $.messager.alert('提示', '删除商品成功!', undefined, function () {
                                $("#itemList").datagrid("reload");
                            });
                        } else {
                            $.messager.alert("提示", data.msg);
                        }
                    });
                }
            });
        }
    }, '-', {

        text: '下架',
        iconCls: 'icon-remove',
        handler: function () {
            //获取选中的ID串中间使用","号分割
            var ids = getSelectionsIds();
            if (ids.length == 0) {
                $.messager.alert('提示', '未选中商品!');
                return;
            }
            $.messager.confirm('确认', '确定下架ID为 ' + ids + ' 的商品吗？', function (r) {
                if (r) {
                    var params = {"ids": ids};
                    $.post("/item/updateStatus/2", params, function (data) {
                        if (data.status == 200) {
                            $.messager.alert('提示', '下架商品成功!', undefined, function () {
                                $("#itemList").datagrid("reload");
                            });
                        }
                    });
                }
            });
        }
    }, {

        text: '上架',
        iconCls: 'icon-remove',
        handler: function () {
            var ids = getSelectionsIds();
            if (ids.length == 0) {
                $.messager.alert('提示', '未选中商品!');
                return;
            }
            $.messager.confirm('确认', '确定上架ID为 ' + ids + ' 的商品吗？', function (r) {
                if (r) {
                    var params = {"ids": ids};
                    $.post("/item/updateStatus/1", params, function (data) {
                        if (data.status == 200) {
                            $.messager.alert('提示', '上架商品成功!', undefined, function () {
                                $("#itemList").datagrid("reload");
                            });
                        }
                    });
                }
            });
        }
    }];
</script>